<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>千锋大屏数据可视化</title>
    <link rel="stylesheet" href="./assets/css/reset.css">
    <script src="./assets/js/flexible.js"></script>
    <script src="./assets/js/jquery.js"></script>
    <script src="./assets/js/header.js"></script> 
    <script src="./assets/js/echarts.js"></script> 
    <script src="./assets/js/left1.js"></script>
    <script src="./assets/js/left2.js"></script>
    <script src="./assets/js/left3.js"></script>
    <script src="./assets/js/center1.js"></script>
    <script src="./assets/js/center2.js"></script>
    <script src="./assets/js/center3.js"></script>
    <script src="./assets/js/right1.js"></script>
    <script src="./assets/js/right2.js"></script>
    <script src="./assets/js/right3.js"></script>

</head>
<body>
    <!-- 布局自适应实现：通过插件 px2rem,设置默认的px与rem的转换值，引入flexible.js（封装好的） -->
    
    <!-- <div class="text"></div> -->
    <!-- 头 -->
    <header>
        <h1>锋团大数据平台可视化预览</h1>
        <span>2022年1月1日</span>
    </header>
    <!-- 头 -->

    <!-- section -->
    <section>
        <div class="column columnOne">
            <div class="box oneBox">
                <div class="title">标题样式</div>
                <div class="body"></div>
            </div>
            <div class="box twoBox" style="color:white">
                <div class="title">标题样式</div>
                <div class="body">
                    <div class="nav">
                        <span>单号</span>
                        <span>金额</span>
                        <span>品名</span>
                        <span>时间</span>
                    </div>
                    <div class="body">
                        <ul style="margin-top:0;">
                            <li>
                                <span>10020</span>
                                <span>999</span>
                                <span>手机</span>
                                <span>18h</span>
                            </li>
                            <li>
                                <span>10020</span>
                                <span>999</span>
                                <span>手机</span>
                                <span>18h</span>
                            </li>
                            <li>
                                <span>10020</span>
                                <span>999</span>
                                <span>手机</span>
                                <span>18h</span>
                            </li>
                            <li>
                                <span>10020</span>
                                <span>999</span>
                                <span>手机</span>
                                <span>18h</span>
                            </li>
                            <li>
                                <span>10020</span>
                                <span>999</span>
                                <span>手机</span>
                                <span>18h</span>
                            </li>
                            <li>
                                <span>10020</span>
                                <span>999</span>
                                <span>手机</span>
                                <span>18h</span>
                            </li>
                            <li>
                                <span>10020</span>
                                <span>999</span>
                                <span>手机</span>
                                <span>18h</span>
                            </li>
                            <li>
                                <span>10020</span>
                                <span>999</span>
                                <span>手机</span>
                                <span>18h</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="box threeBox">
                <div class="title">标题样式</div>
                <div class="body"></div>
            </div>
        </div>
        <div class="column columnTwo">
            <div class="box fourBox ">
                    <div class="left">
                        <div class="top">成交总额 <span>单位：元</span></div>
                        <div class="bottom">19524785</div>
                    </div>
                    <div class="right">
                    </div>
            </div>
            <div class="box fiveBox">
                <div class="title">标题样式</div>
                <div class="body"></div>
            </div>
            <div class="box sixBox">
                <div class="title">标题样式</div>
                <div class="body"></div>
            </div>
        </div>
        <div class="column columnThree">
            <div class="box sevenBox">
                <div class="title">标题样式</div>
                <div class="body">
                    <div class="nav">
                        <span>排名</span>
                        <span>公司</span>
                        <span>数量</span>
                        <span>增长率</span>
                    </div>
                    <div class="body">
                        <ul style="margin-top:0;">
                            <li>
                                <span>
                                    <u>
                                        1
                                    </u>
                                </span>
                                <span>华为</span>
                                <span>150亿</span>
                                <span>45%</span>
                            </li>
                            <li>
                                <span>
                                    <u>
                                        1
                                    </u>
                                </span>
                                <span>华为</span>
                                <span>150亿</span>
                                <span>45%</span>
                            </li>
                            <li>
                                <span>
                                    <u>
                                        1
                                    </u>
                                </span>
                                <span>华为</span>
                                <span>150亿</span>
                                <span>45%</span>
                            </li>
                            <li>
                                <span>
                                    <u>
                                        1
                                    </u>
                                </span>
                                <span>华为</span>
                                <span>150亿</span>
                                <span>45%</span>
                            </li>
                            <li>
                                <span>
                                    <u>
                                        1
                                    </u>
                                </span>
                                <span>华为</span>
                                <span>150亿</span>
                                <span>45%</span>
                            </li>
                          
                        </ul>
                    </div>
                </div>
            </div>
            <div class="box eightBox">
                <div class="title">标题样式</div>
                <div class="body">
                    <div class="nav">
                        <span>排名</span>
                        <span>公司</span>
                        <span>数量</span>
                        <span>增长率</span>
                    </div>
                    <div class="body">
                        <ul style="margin-top:0;">
                            
                            <li>
                                <span>
                                    <u>
                                        1
                                    </u>
                                </span>
                                <span>华为</span>
                                <span>150亿</span>
                                <span>45%</span>
                            </li>
                            <li>
                                <span>
                                    <u>
                                        1
                                    </u>
                                </span>
                                <span>华为</span>
                                <span>150亿</span>
                                <span>45%</span>
                            </li>
                             <li>
                                <span>
                                    <u>
                                        1
                                    </u>
                                </span>
                                <span>华为</span>
                                <span>150亿</span>
                                <span>45%</span>
                            </li> 
                            <li>
                                <span>
                                    <u>
                                        1
                                    </u>
                                </span>
                                <span>华为</span>
                                <span>150亿</span>
                                <span>45%</span>
                            </li> 
                            <li>
                                <span>
                                    <u>
                                        1
                                    </u>
                                </span>
                                <span>华为</span>
                                <span>150亿</span>
                                <span>45%</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="box nineBox">
                <div class="title">标题样式</div>
                <div class="body"></div>
            </div>
        </div>
    </section>
    <!-- section -->
</body>
</html>